import React, { useEffect, useState } from 'react'
import { Form, Input,Button } from 'antd-mobile'
import { useLocation, useNavigate ,Link} from 'react-router-dom'
import { ajax } from '../../api'
import { message } from 'antd'
import { reg } from '../../utils/validate'
import  './lgName.scss'

const styles:any={
    extraPart:{
        borderLeft: 'solid 1px #eeeeee',
        paddingLeft:' 0.12rem',
        fontSize: '0.17rem',
        lineHeight: '0.22rem'
    }
}
export default function LoginBYPhone() {
  const [form] = Form.useForm()
    const navigate =  useNavigate()
    const onFinish = async (values: any) => {
        console.log(values);
        let res=await ajax.checkWord(values)
        console.log(res);
        if(res.code==200){
          sessionStorage.setItem('token',res.token)
          localStorage.setItem('phone',values.phone)
          navigate('/home')
        }
    };
  
    const onFinishFailed = (errorInfo: any) => {
        message.error('请输入正确的表单信息');
    };
    let [flag,setFlag]=useState<boolean>(true)
    let [count,setCount]=useState<number>(120)
    const [disabled,setDisabled] = useState<boolean>(true)
    //定时器
    let timer:any=null
    const timeDown=()=>{
        timer=setInterval(()=>{
          if(count>0){
            setCount(--count)
          }
          else{
            clearInterval(timer)
            timer=null
            setFlag(true)
            setCount(120)
          }
        },1000)
      }
    const changeFlag=()=>{
        console.log(form);
        //发送验证码判断是否有电话号码
        ajax.findOne({
          phone:form.getFieldValue('phone')
        }).then(result=>{
          if(result.result){
            console.log(result);
          }
          
        })
        
        setFlag(false)
        timeDown()
    }
    const location=useLocation()
      useEffect(()=>{
        console.log(form);
        let phone=new URLSearchParams(location.search).get('phone')
        console.log(phone);
        if(phone){
          form.setFieldsValue({
            phone
          })
          setDisabled(!reg.phone.test(phone))
        }
        return ()=>{
          clearInterval(timer)
          timer = null 
          setCount(120)
          setFlag(true)
        }
      },[])

  return (
    <div>
        <Form 
        layout='horizontal'
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        form={form}
        footer={
          <Button block type='submit' color='primary' size='middle'>
            登陆
          </Button>
        }>
          <Form.Item label='手机号码' name='phone' style={{background:'#f4f4f4'}}
          rules={[{ required: true, message: '手机号不能为空' },{pattern:reg.phone,message:"请输入正确的手机号格式"}]}>
            <Input placeholder='请输入手机号码' 
           clearable />
          </Form.Item>
          <Form.Item
            label='短信验证码'
            style={{background:'#f4f4f4'}}
            extra={
              flag? <div className={styles.extraPart} onClick={changeFlag}>
                <a>发送验证码</a>
              </div>:<div className={styles.extraPart}>
                剩余{count}S
              </div>
            }
            rules={[{ required: true, message: '验证码不能为空' }, {
              pattern:reg.code,message:'请输入长度为4位的验证码'
            }]}
            name="captcha"
          >
            <Input placeholder='请输入验证码' clearable />
          </Form.Item>
          <Form.Item
           style={{background:'#f4f4f4',fontSize:"0.12rem"}}
          >
            <Link to="/register">没有账号，前往注册</Link >
            <Link to="/forgetPass">忘记密码</Link >
          </Form.Item>
        </Form>
    </div>
  )
}
